<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [wangll]
 * @LastEditTime: 2021-09-22 18:53:08
-->
<template>
<!-- 2.设置图表容器 容纳图表 -->
<!-- 如何在vue中设置dom节点 -->
  <div ref='root' style="height:150px">
    
  </div>
</template>
<script>
// 从g2plot对象中引入折线图的构造函数
import {Line} from '@antv/g2plot'
// 1.引入组件库
export default {
  data(){
    return{

    }
  },
  // dom节点创建完毕，但是没有挂载，获取不到dom节点
  created(){

  },
  // 在onMounted之后执行，页面dom节点创建完毕，挂载完毕，获取dom节点
  mounted(){
    this.initCharts()
  },
  methods:{
    // 封装图表方法
    initCharts(){
      //3.创建一个图表实例
      //vue中获取dom节点this.$refs['root']
      let line = new Line(this.$refs['root'],{
      data:[
        { day: '1-6', value: 100 },
        { day: '7-12', value: 180 },
        { day: '13-18', value: 200 },
        { day: '19-24', value: 300 },
        { day: '25-31', value: 240 },],
      xField:'day',
      yField:'value',
      color:'skyblue'
      })
      // 4.渲染
      line.render();
    }
  }
}
</script>